<template>
  <p>eat: {{ obj.hobby.eat }}</p>
  <button @click="update">update eat</button>
</template>

<script>
import { isReactive, reactive, watch } from 'vue'
export default {
  setup() {
    const obj = reactive({
      name: 'ifer',
      hobby: {
        eat: '西瓜',
      },
    })

    // 铺垫：reactive 数据内部的【对象】也是一个 reactive
    // console.log(isReactive(obj.hobby))

    const update = () => {
      obj.hobby.eat = '面条'
    }
    // console.log(obj.name)
    // console.log(obj.hobby)
    // obj.hobby 其实也是 reactive 类型数据，是 reactive 类型的数据，就符合 reactive 监听数据的特点
    watch(
      obj.hobby,
      (newValue, oldValue) => {
        console.log(newValue === oldValue)
      },
      {
        deep: false, // 默认开启了深度监听，且配置无效
      }
    )
    return { obj, update }
  },
}
</script>
